<template>
  <div>
    <Search
      style="margin-bottom:10px;text-align:center"
      @search="search"
      v-model="searchWord"
      showSearchButton
      placeholder="搜索仓库"
      triggerType="enter"
      :width="600"
      block
    >
      <i class="h-icon-search"></i
    ></Search>
    <Table
      :stripe="stripe"
      :datas="list"
      :height="550"
      :border="border"
      :loading="loading"
    >
      <!-- <TableItem title="序号" align="center" prop="$serial"></TableItem> -->
      <TableItem title="ID" sort="auto" align="center" prop="id"></TableItem>
      <TableItem title="名称" align="center">
        <template slot-scope="{ data }">
          <div class="text-ellipsis" v-width="100">
            {{ data.product_name }}
          </div>
        </template>
      </TableItem>
      <TableItem title="图片" align="center">
        <template slot-scope="{ data }">
          <img
            v-if="data.product_logo"
            :src="data.product_logo[0]"
            style="width:30px;height:30px"
          />
          <i v-else class="iconfont icon-images" style="font-size:25px"></i>
        </template>
      </TableItem>
      <TableItem
        title="价格"
        align="center"
        prop="product_price"
        sort="auto"
      ></TableItem>
      <TableItem
        sort="auto"
        title="库存"
        align="center"
        prop="product_stock"
      ></TableItem>
      <TableItem title="分类" align="center">
        <template slot-scope="{ data }">
          <div class="text-ellipsis " v-width="100">
            {{ data.cate_name }}
          </div>
        </template>
      </TableItem>
      <TableItem
        title="酒精度"
        sort="auto"
        align="center"
        prop="product_deg"
      ></TableItem>
      <TableItem
        title="年份"
        sort="auto"
        align="center"
        prop="product_year"
      ></TableItem>
      <TableItem title="操作" align="center" :width="80" fixed="right">
        <template slot-scope="{ data }">
          <i
            v-tooltip
            placement="left"
            content="放入产品列表"
            class="h-btn h-btn-s h-btn-blue iconfont icon-zhongzhi"
            @click="removeSoftDel(data.id)"
          >
          </i>
          <i
            v-tooltip
            placement="right"
            content="删除"
            class=" iconfont icon-shanchu h-btn h-btn-s h-btn-red"
            @click="realDel(data.id)"
          ></i>
        </template>
      </TableItem>
      <div slot="empty">暂时无数据</div>
    </Table>
    <Pagination
      style=" margin-top:20px"
      v-model="pagination"
      align="center"
      @change="currentChange"
      small
    ></Pagination>
  </div>
</template>

<script>
// import { res } from "@/api/login";
export default {
  name:"productSoft",
  data() {
    return {
      stripe: true,
      searchWord: null,
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },
      border: true,
      loading: true,
      list: []
    };
  },
  methods: {
    search() {
      // if (!data) return;
      this.getSoftList();
    },
    realDel(id) {
      this.$Confirm("删除后无法恢复,确认？")
        .then(async () => {
          let res = await this.$post(`/api/product/delete/${id}`, {
            
            del: true
          });
          if (res && res.code === 200) {
            this.$Message.success("删除成功");
            this.getSoftList();
          } else {
            this.$Message.error("删除失败");
          }
        })
        // 点击取消按钮后的事情
        .catch(() => {});
    },
    removeSoftDel(id) {
      this.$Confirm("恢复正常,确认？")
        .then(async () => {
          let res = await this.$post("/api/product/soft/remove", {
            id: id
          });
          if (res && res.code === 200) {
            this.$Message.success("恢复成功成功");
            // 考虑是否跳转。万一要恢复多条呢
            this.$router.push("/product");
          } else {
            this.$Message.error("恢复失败失败");
          }
        })
        .catch(() => {});
    },
    
    currentChange() {
      this.getSoftList();
    },
    async getSoftList() {
      this.loading = false;
      let res = await this.$get("/api/product/soft/list", {
        limit: this.pagination.size,
        page: this.pagination.page,
        searchWord: this.searchWord
      });
      if (res && res.code === 200) {
        this.list = res.data.list;
        this.pagination.total = res.data.count;
      } else {
        this.$Message.error("获取失败,请刷新重试");
      }
    }
  },
  mounted() {
    this.getSoftList();
  
  }
};
</script>

<style>
</style>